<!--
 * @Author: your name
 * @Date: 2022-10-28 09:10:11
 * @LastEditTime: 2023-03-13 12:01:12
 * @LastEditors: yuhan
 * @Description: API管理
 * @FilePath: \apiadmin\src\views\apiPage\apiList.vue
-->
<template>
  <div class="api-list">
    <el-card class="box-card bottom-in">
      <el-form>
        <el-form-item>
          <el-input
            style="width: 400px; margin-right: 20px"
            v-model="dataTable.name"
            placeholder="请输入搜索内容"
            clearable
            @keyup.enter="getTableData"
          >
            <template #append>
              <el-button :icon="Search" @click="getTableData" />
            </template>
          </el-input>
          <el-button
            type="primary"
            @click="
              () => {
                dataTable.name = '';
                getTableData();
              }
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card bottom-in">
      <template #header>
        <div class="card-header">
          <div>
            <el-button class="button" type="primary" @click="handleEdit('creatApi')" :icon="Plus"
              >新建</el-button
            >
            <el-button
              class="button"
              type="success"
              @click="handleEdit('multipleTestSpeed')"
              :icon="Odometer"
              >批量测速</el-button
            >
            <span style="margin: 0 10px; color: #a8abb2"
              >SQL接口、静态接口不可测速；接口下线后才可修改</span
            >
          </div>
          <div>
            <RefreshBtn />
          </div>
        </div>
      </template>
      <div class="card-content" v-if="dataTable.data.length > 0" v-loading="dataTable.loading">
        <el-table
          :data="dataTable.data"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="(row, index) => !(!row.status || [3, 4, 5].includes(row.type))"
          />
          <el-table-column prop="id" label="ID" align="center" />
          <el-table-column prop="name" label="API名称" align="center" min-width="120px">
            <template #default="scope">
              {{ scope.row.name || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="apiPath" label="请求路径" align="center" min-width="120px"
            ><template #default="scope">
              <span class="customTag">{{ scope.row.apiPath || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="primaryKey" label="主键" align="center"
            ><template #default="scope">
              {{ scope.row.primaryKey || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="auto" label="是否鉴权" align="center" min-width="100px"
            ><template #default="scope">
              {{ scope.row.auto || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="indexId" label="指标" align="center" min-width="150px"
            ><template #default="scope">
              {{ scope.row.indexName || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" align="center" min-width="100px">
            <template #default="scope">
              {{ getDataTypeLabel(scope.row.type) || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="document" label="文档" align="center" min-width="110px">
            <template #default="scope">
              <el-button
                v-if="scope.row.document"
                size="small"
                :icon="View"
                @click="openJsonViewer('文档json', JSON.parse(scope.row.document))"
                >查看文档</el-button
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column prop="updatedTime" label="修改时间" align="center" width="160px">
            <template #default="scope">
              {{ formatTime(scope.row.updatedTime, "YYYY-MM-DD hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="是否在线" align="center" min-width="100px">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                style="--el-switch-on-color: #13ce66"
                @change="(val) => handleEdit('changeStatus', { ...scope.row, change: val })"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220px" align="right" fixed="right">
            <template #default="scope">
              <el-button
                type="success"
                v-if="!(!scope.row.status || [1, 2, 3, 4, 5].includes(scope.row.type))"
                :disabled="!scope.row.status || [1, 2, 3, 4, 5].includes(scope.row.type)"
                size="small"
                @click="handleEdit('testSpeed', scope.row)"
                >测速</el-button
              >
              <el-button type="primary" size="small" @click="handleEdit('updateAPI', scope.row)"
                >修改</el-button
              >
              <el-popconfirm title="确定删除?" @confirm="handleEdit('deleteAPI', scope.row)">
                <template #reference>
                  <el-button plain size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next, total"
          background
          :current-page="dataTable.pageNo"
          v-model:page-size="dataTable.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :total="dataTable.total"
          @size-change="
            (pageSize) => {
              dataTable.pageNo = 1; // 重置到第一页
              dataTable.pageSize = pageSize;
              getTableData();
            }
          "
          @current-change="
            (pageNo) => {
              dataTable.pageNo = pageNo;
              getTableData();
            }
          "
        />
      </div>
      <el-empty v-else description="暂无数据" v-loading="dataTable.loading" />
    </el-card>
    <el-dialog
      class="editDialog"
      v-model="editDialog.visible"
      :title="getEditDialogTitle"
      width="820px"
      center
      :close-on-click-modal="false"
      :before-close="closeEditDialog"
    >
      <el-form
        ref="dataForm"
        class="dataForm"
        :model="editDialog.formData"
        status-icon
        :rules="editDialog.rules"
        label-width="120px"
      >
        <!-- API名称 -->
        <el-form-item :label="`${page_config.formItem.name.name}`" prop="name">
          <el-input
            v-model="editDialog.formData.name"
            :placeholder="page_config.formItem.name.placeholder"
            clearable
          />
        </el-form-item>
        <!-- 类型 -->
        <el-form-item :label="`${page_config.formItem.type.name}`" prop="type">
          <el-radio-group
            v-model="editDialog.formData.type"
            @change="(val) => changeFormDataRadio('type', val)"
          >
            <el-radio
              v-for="item in _enum.dataType"
              :key="item.key"
              :label="item.key"
              size="large"
              >{{ item.value }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <!-- 指标/sql脚本：混合请求接口时是list多选最多两个，其他情况下是单选, 类型为静态接口时无需填写指标；sql接口情况下label展示位sql脚本并且option要换成sql列表 -->
        <el-form-item
          v-if="editDialog.formData.type !== 4 && editDialog.formData.type !== 6"
          :label="`${editDialog.formData.type === 3 ? 'sql脚本' : '指标'}`"
          prop="indexId"
        >
          <!-- 切换到sql接口时需要切换options -->
          <el-select
            v-if="editDialog.formData.type === 3"
            style="width: 100%"
            v-model="editDialog.formData.indexId"
            multiple
            :multiple-limit="editDialog.formData.type === 1 ? 2 : 1"
            collapse-tags
            collapse-tags-tooltip
          >
            <el-option
              v-for="item in sqlScriptList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 混合请求接口时(叠加和主键都是)是list多选最多两个，其他情况下是单选 -->
          <el-select
            v-else
            style="width: 100%"
            v-model="editDialog.formData.indexId"
            multiple
            :multiple-limit="[1, 2].includes(editDialog.formData.type) ? 2 : 1"
            collapse-tags
            collapse-tags-tooltip
          >
            <el-option
              v-for="item in indexIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 请求路径 -->
        <el-form-item :label="`${page_config.formItem.apiPath.name}`" prop="apiPath">
          <el-input
            v-model="editDialog.formData.apiPath"
            :placeholder="page_config.formItem.apiPath.placeholder"
            clearable
          />
        </el-form-item>
        <!-- 接口可写 在类型为静态接口时要展示 -->
        <el-form-item
          v-if="editDialog.formData.type === 4"
          :label="`${page_config.formItem.writable.name}`"
          prop="writable"
        >
          <el-switch v-model="editDialog.formData.writable" style="--el-switch-on-color: #13ce66" />
        </el-form-item>
        <!-- 静态接口 在类型为静态接口时要填 其他情况不需要 -->
        <el-form-item
          v-if="editDialog.formData.type === 4"
          :label="`${page_config.formItem.staticData.name}`"
          prop="staticData"
        >
          <el-input
            v-model="editDialog.formData.staticData"
            :placeholder="page_config.formItem.staticData.placeholder"
            type="textarea"
            :rows="10"
            clearable
          />
        </el-form-item>
        <!-- 主键 在融合模式 主键时候 需要传参 为单个key值 -->
        <el-form-item
          v-if="editDialog.formData.type === 2"
          :label="`${page_config.formItem.primaryKey.name}`"
          prop="primaryKey"
        >
          <el-input
            v-model="editDialog.formData.primaryKey"
            :placeholder="page_config.formItem.primaryKey.placeholder"
            clearable
          />
        </el-form-item>
        <!-- 黑白名单规则 -->
        <el-form-item :label="`${page_config.formItem.rule.name}`" prop="rule">
          <el-radio-group
            v-model="editDialog.formData.rule"
            @change="(val) => changeFormDataRadio('rule', val)"
          >
            <el-radio v-for="item in _enum.rule" :key="item.key" :label="item.key" size="large">{{
              item.value
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 黑白名单 -->
        <el-form-item
          v-if="[1, 2].includes(editDialog.formData.rule)"
          :label="`${page_config.formItem.list.name}`"
          prop="list"
        >
          <el-tag
            style="margin: 0 10px"
            v-for="(listItem, listItemIndex) in editDialog.formData.list"
            :key="listItem"
            closable
            :disable-transitions="false"
            @close="
              () => {
                editDialog.formData.list.splice(listItemIndex, 1);
              }
            "
          >
            {{ listItem }}
          </el-tag>
          <el-input
            v-if="listConfig.inputVisible"
            ref="InputRef"
            v-model="listConfig.inputValue"
            style="width: 90px"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button
            v-else
            class="button-new-tag ml-1"
            size="small"
            @click="
              () => {
                listConfig.inputVisible = true;
              }
            "
          >
            + New Tag
          </el-button>
        </el-form-item>
        <!-- 处理结果 -->
        <el-form-item :label="`处理结果`">
          <json-viewer
            v-if="formJsonView.type === 'test'"
            :value="formJsonView.testData"
            :expand-depth="5"
            copyable
            boxed
            :show-array-index="false"
            sort
          ></json-viewer>
          <span v-else style="color: #a8abb2">按要求填写完信息后点击测试可查看测试结果</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <div>
            <!-- 回调接口类型没有测试功能 -->
            <el-button
              v-if="editDialog.formData.type !== 5"
              @click="handleEdit('test')"
              type="success"
            >
              测试
            </el-button>
          </div>
          <div>
            <el-button type="primary" @click="handleSubmit" :loading="editDialog.loading">
              {{ getEditDialogBtnLabel }}
            </el-button>
            <el-button @click="closeEditDialog"> 取消 </el-button>
          </div>
        </span>
      </template>
    </el-dialog>
    <JsonViewerDialog
      :title="jsonView.title"
      :visible="jsonView.visible"
      :jsonData="jsonView.data"
      @closeDialog="
        () => {
          jsonView.data = '';
          jsonView.visible = false;
        }
      "
    />
    <CustomTestApiDrawer
      :title="testApiDrawer.title"
      :visible="testApiDrawer.visible"
      :testApiList="testApiDrawer.apiList"
      @closecb="(val) => (testApiDrawer.visible = val)"
    />
  </div>
</template>
<script setup>
import { Plus, View, Odometer, Search } from "@element-plus/icons-vue";
import { computed, onMounted, ref } from "vue";
import { formatTime, getFormDataUrl } from "@/utils/index.js";
import apiUrl from "@/config/api.mjs";
import pageconfig from "@/config/pageConfig.js";
import { ElMessage, ElLoading } from "element-plus";
import JsonViewerDialog from "@/components/JsonViewer/index.vue";
import JsonViewer from "vue-json-viewer";
import { useStore } from "vuex";
import RefreshBtn from "@/components/RefreshBtn/index.vue";
const store = useStore();
const _enum = pageconfig.apiPage_config._enum;
const page_config = pageconfig.apiPage_config;
const apis = apiUrl.apiList;
const dataTable = ref({
  projectId: "",
  data: [],
  loading: false,
  name: "", // 模糊搜索字段
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
// 指标集合
const indexIdList = ref([]);
const getIndexIdList = () => {
  getFormDataUrl("get", apiUrl.indexConfig.dataList, {
    pageNo: 1,
    pageSize: 1000,
    projectId: dataTable.value.projectId,
  }).then((res) => {
    indexIdList.value =
      res?.records.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      }) || [];
  });
};
// sql脚本集合
const sqlScriptList = ref([]);
const getSqlScriptList = () => {
  getFormDataUrl("get", apiUrl.sqlScript.dataList, {
    pageNo: 1,
    pageSize: 1000,
    projectId: dataTable.value.projectId,
  }).then((res) => {
    sqlScriptList.value =
      res?.records.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      }) || [];
  });
};
// 黑白名单
const listConfig = ref({
  inputVisible: false,
  inputValue: "",
});
const handleInputConfirm = () => {
  if (listConfig.value.inputValue) {
    editDialog.value.formData.list.push(listConfig.value.inputValue);
  }
  listConfig.value.inputVisible = false;
  listConfig.value.inputValue = "";
};
const dataForm = ref(null);
const editDialog = ref({
  loading: false,
  visible: false,
  editType: "", // create 新增 update 修改
  rules: {
    name: [
      {
        required: true,
        trigger: "blur",
        message: `请填写${page_config.formItem.name.name}`,
      },
    ],
    type: [
      {
        required: true,
        trigger: "blur",
        message: `请选择${page_config.formItem.type.name}`,
      },
    ],
    indexId: [
      {
        required: true,
        trigger: "blur",
        message: `请选择${page_config.formItem.indexId.name}`,
      },
    ],
    apiPath: [
      {
        required: true,
        trigger: "blur",
        message: `请填写${page_config.formItem.apiPath.name}`,
      },
    ],
    staticData: [
      {
        required: true,
        trigger: "blur",
        message: `请填写${page_config.formItem.staticData.name}`,
      },
    ],
    rule: [
      {
        required: true,
        trigger: "blur",
        message: `请选择${page_config.formItem.rule.name}`,
      },
    ],
    list: [
      {
        required: true,
        trigger: "blur",
        message: `请填写${page_config.formItem.list.name}`,
      },
    ],
  },
  formData: {
    projectId: "", // 所属项目, 从上级带进
    name: "", // api名称 必填
    type: "", // 类型
    indexId: [], // 指标 可不选，最多选两个
    apiPath: "", // 请求路径
    auto: 0, // 是否鉴权, 默认都给0
    document: "", // 文档
    staticData: "", // 静态数据，在类型为静态接口时要填 其他情况不需要
    writable: false, // 接口可写 可写 即为 前端配置接口 可认为是 静态接口
    status: false, // 是否在线
    primaryKey: "", // 主键 在融合模式 主键时候 需要传参 为单个key值
    rule: "", // 黑白名单规则 为空或者0 放行， 1.黑名单2.白名单
    list: [], // 黑白名单 1.黑名单2.白名单时可填
  },
});
// 获取数据类型label
const getDataTypeLabel = (key) => {
  return _enum.dataType.find((item) => item.key === key)?.value || "-";
};
// 黑白名单label
// const getRuleLabel = (key) => {
//   return _enum.rule.find((item) => item.key === key)?.value || "-";
// };
// 项目弹框标题
const getEditDialogTitle = computed(() => {
  let returnTitle = "";
  switch (editDialog.value.editType) {
    case "create":
      returnTitle = "新建API";
      break;
    case "update":
      returnTitle = "修改API";
      break;
  }
  return returnTitle;
});
// 项目弹框底部按钮文案
const getEditDialogBtnLabel = computed(() => {
  let btnLabel = "";
  switch (editDialog.value.editType) {
    case "create":
      btnLabel = "保存";
      break;
    case "update":
      btnLabel = "更新";
      break;
  }
  return btnLabel;
});
// 获取表格数据
const getTableData = () => {
  dataTable.value.loading = true;
  let api = apis.dataListFuzzyQuery;
  let params = {
    pageNo: dataTable.value.pageNo,
    pageSize: dataTable.value.pageSize,
    projectId: dataTable.value.projectId,
    name: dataTable.value.name,
  };
  // 有内容调用模糊搜索的接口，没有则调用原来的列表接口（我也觉得没必要分两个，暂时由前端判断区分调用不同接口）
  if (dataTable?.value?.name) {
    api = apis.dataListFuzzyQuery;
  } else {
    api = apis.dataList;
    delete params.name;
  }

  getFormDataUrl("get", api, params)
    .then((res) => {
      if (res) {
        dataTable.value.data = res?.records || [];
        dataTable.value.total = res?.total;
      } else {
        ElMessage.warning("res:", res);
      }
    })
    .catch(() => {
      dataTable.value.data = [];
    })
    .finally(() => {
      dataTable.value.loading = false;
    });
};
// 切换类型/黑白名单规则等事件，需要重置部分字段
const changeFormDataRadio = (type, val) => {
  switch (type) {
    // 切换类型时清空 指标 主键 静态数据 字段
    case "type":
      editDialog.value.formData.primaryKey = "";
      editDialog.value.formData.staticData = "";
      editDialog.value.formData.indexId = "";
      editDialog.value.formData.writable = false;
      break;
    // 切换 黑白名单规则，重置黑白名单列表
    case "rule":
      editDialog.value.formData.list = [];
      break;
  }
};
// 初始化项目弹窗
const initEditDialog = (initformData = "") => {
  const formData = JSON.parse(JSON.stringify(initformData));
  editDialog.value.formData = {
    projectId: dataTable.value.projectId || "", // 所属项目, 从上级带进
    name: formData?.name || "", // api名称 必填
    type: formData ? formData.type : 0, // 类型
    indexId: formData?.indexId
      ? JSON.parse(formData?.indexId) instanceof Array
        ? JSON.parse(formData?.indexId)
        : [JSON.parse(formData?.indexId)]
      : [], // 指标 可不选，最多选两个 类型为混合请求接口（叠加）时是数组，其他情况是单个字符串，所以此处得做修改适配
    apiPath: formData?.apiPath || "", // 请求路径
    auto: formData?.auto !== "" ? formData?.auto : 0, // 是否鉴权, 默认都给0
    document: formData?.document || "", // 文档
    staticData: formData?.staticData || "", // 静态数据，在类型为静态接口时要填 其他情况不需要
    writable: formData?.writable !== "" ? formData?.writable : false, // 接口可写 可写 即为 前端配置接口 可认为是 静态接口
    status: formData?.status !== "" ? formData?.status : false, // 是否在线
    primaryKey: formData?.primaryKey || "", // 主键 在融合模式 主键时候 需要传参 为单个key值
    rule: formData ? formData.rule : 0, // 黑白名单规则 为空或者0 放行， 1.黑名单2.白名单
    list: formData?.list ? JSON.parse(formData?.list) : [], // 黑白名单 1.黑名单2.白名单时可填
  };
  // 更新情况下保存id，接口更新需要
  if (formData) {
    editDialog.value.formData.id = formData.id;
  }
};
// 打开项目编辑弹框
const openEditDialog = (formData) => {
  initEditDialog(formData);
  initFormJsonView();
  editDialog.value.visible = true;
};
// 关闭项目编辑弹框
const closeEditDialog = () => {
  dataForm.value.clearValidate();
  editDialog.value.visible = false;
  editDialog.value.title = "";
  initEditDialog();
  initFormJsonView();
};
// 上线/下线api
const changeApiStatus = (item) => {
  const api = item.change ? apis.online : apis.offline;
  const id = item.id;
  dataTable.value.loading = true;
  getFormDataUrl("get", `${api}/${id}`)
    .then((res) => {
      ElMessage.success(`${item.change ? "上线成功" : "下线成功"}`);
      getTableData();
    })
    .finally(() => {
      dataTable.value.loading = false;
    });
};
// 操作统一入口
const handleEdit = (editType, row) => {
  console.log("🚀 ~ file: apiList.vue ~ line 606 ~ handleEdit ~ row", row);
  switch (editType) {
    case "creatApi":
      editDialog.value.editType = "create";
      openEditDialog();
      break;
    case "updateAPI":
      if (row.status) {
        ElMessage.warning("接口处于上线状态，不能修改");
        return;
      }
      editDialog.value.editType = "update";
      openEditDialog(row);
      break;
    case "deleteAPI":
      handleDelete(row.id);
      break;
    case "changeStatus":
      changeApiStatus(row);
      break;
    case "test":
      testApiPath();
      break;
    case "testSpeed":
      testApiDrawer.value.apiList = [row];
      openTestApiDrawer();
      break;
    case "multipleTestSpeed":
      testApiDrawer.value.apiList = testApiDrawer.value.selectedApiList;
      if (testApiDrawer.value.apiList.length > 0) {
        openTestApiDrawer();
      } else {
        ElMessage.warning("请选择需要测速的API");
      }
      break;
    default:
      break;
  }
};
// 编辑项目增加请求头
// const editHeaderItem = (type, index) => {
//   switch (type) {
//     case "add":
//       editDialog.value.formData.header.push({
//         key: "",
//         value: "",
//       });
//       break;
//     case "delete":
//       editDialog.value.formData.header.splice(index, 1);
//       break;
//   }
// };
// 删除项目
const handleDelete = (id) => {
  getFormDataUrl("get", `${apis.delete}/${id}`)
    .then((res) => {
      ElMessage.success("操作成功");
      getTableData();
    })
    .finally(() => {});
};
// 确定操作 新建/修改项目
const handleSubmit = () => {
  dataForm.value.validate((valid) => {
    if (valid) {
      let api = "";
      let param = {
        ...editDialog.value.formData,
        indexId: [1, 2].includes(editDialog.value.formData.type)
          ? JSON.stringify(editDialog.value.formData.indexId)
          : JSON.stringify(editDialog.value.formData.indexId[0]),
        list:
          editDialog.value.formData.list.length > 0
            ? JSON.stringify(editDialog.value.formData.list)
            : "",
      };
      switch (editDialog.value.editType) {
        case "create":
          api = apis.create;
          break;
        case "update":
          api = apis.update;
          break;
      }
      editDialog.value.loading = true;
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
      });
      getFormDataUrl("post", api, param)
        .then((res) => {
          ElMessage.success("操作成功");
          closeEditDialog();
          getTableData();
        })
        .finally(() => {
          editDialog.value.loading = false;
          loading.close();
        });
    }
  });
};

// 测试api
const testApiPath = () => {
  dataForm.value.validate((valid) => {
    if (valid) {
      formJsonView.value.type = "test";
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
      });
      const param = {
        ...editDialog.value.formData,
        indexId:
          editDialog.value.formData.type === 1 || editDialog.value.formData.type === 2
            ? JSON.stringify(editDialog.value.formData.indexId)
            : JSON.stringify(editDialog.value.formData.indexId[0]),
        list:
          editDialog.value.formData.list.length > 0
            ? JSON.stringify(editDialog.value.formData.list)
            : "",
      };
      console.log(editDialog.value.formData.type, "sd");
      getFormDataUrl("post", apis.test, param)
        .then((res) => {
          formJsonView.value.testData = res;
        })
        .finally(() => {
          loading.close();
        });
    }
  });
};

// json格式化弹窗
const jsonView = ref({
  visible: false,
  title: "",
  data: "",
});
const openJsonViewer = (title, data) => {
  jsonView.value.title = title;
  jsonView.value.data = data;
  jsonView.value.visible = true;
};
// 表单里的jsonview
const formJsonView = ref(null);
const initFormJsonView = () => {
  formJsonView.value = {
    type: "", // test或jsonpath
    testData: "", // 测试返回的数据
  };
};

// 需要测速的api
const testApiDrawer = ref({
  visible: false,
  title: "测试响应速度",
  selectedApiList: [],
  apiList: [],
});
const openTestApiDrawer = () => {
  testApiDrawer.value.visible = true;
};
const handleSelectionChange = (val) => {
  testApiDrawer.value.selectedApiList = [...val];
};

onMounted(() => {
  dataTable.value.projectId = store.getters["project/projectId"];
  getTableData();
  getIndexIdList();
  getSqlScriptList();
});
</script>
<style lang="scss" scoped>
.customTag {
  color: #909399;
  background-color: #f4f4f5;
  padding: 2px 6px;
  border-radius: 2px;
}
.api-list {
  .box-card {
    width: 100%;
    margin-bottom: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .input {
        width: 300px;
      }
    }
  }
  .el-form-item {
    margin: 0;
  }
  .editDialog {
    .dataForm {
      .el-form-item {
        align-items: center;
      }
      .el-row {
        width: 100%;
        justify-content: space-between;
        margin: 0 0 15px 0;
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
